<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-button @click="back" icon="el-icon-arrow-left">返回</el-button>
        <span style="margin-left: 10px">新增试卷</span>
      </div>
      <el-form
        :model="ruleForm"
        style="width: 800px; margin-bottom: 60px"
        :rules="rules"
        ref="ruleForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="试卷名称" prop="exam_name">
          <el-input v-model="ruleForm.exam_name" maxlength="50" show-word-limit placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="培训类型" prop="selected_type_ids">
          <el-cascader
          :show-all-levels="false"
            :options="options2"
            style="width: 100%;"
            v-model="ruleForm.selected_type_ids"
            :props="{ multiple: true, checkStrictly: true,label: 'title', value: 'id' }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="下载模板">
          <a :href="downUrl"><el-button>下载模板</el-button></a>
        </el-form-item>
        <el-form-item label="上传试题" prop="topic_ids">
          <el-upload action="#" :show-file-list="false" accept=".xlsx,.xls" :before-upload="beforeFileUpload" :http-request="handleImport">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
          <p v-if="fileName">{{ fileName }}</p>
          <p class="prompt" style="color: red; margin-top: 15px">
            只能上传.XLS和.XLSX格式的单个文件，且文件大小不超过1MB
          </p>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="footer">
      <el-button @click="back">关闭</el-button>
      <el-button type="primary" size="medium" @click="submitForm('ruleForm')">确认</el-button>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import {TrainTypeTree,TopicUpload,ExamSave} from '@/api/manage';
export default {
  name: 'addTest',
  data() {
    return {
      downUrl:process.env.VUE_APP_API_URL + 'template/topic_template.xlsx',
      ruleForm: {
        exam_name: '',
        type_ids: [],
        selected_type_ids:[],
        topic_ids: null,
      },
      rules: {
        exam_name: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
        selected_type_ids: [{ required: true, message: '请选择培训类型', trigger: 'change' }],
        topic_ids: [{ required: true, message: '请上传试题', trigger: 'change' }],
      },
      options2: [],
      fileName:''
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getTrainTypeTree();
  },
  methods: {
    beforeFileUpload(file){
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!');
      }
      return isLt1M;

    },
    handleImport(e) {
      let obj = new FormData();
      obj.append('file', e.file);
      obj.append('create_type', 2);
      TopicUpload(obj).then((res) => {
        this.ruleForm.topic_ids = res.data.topic_ids;
        this.$message.success('上传成功');
        this.fileName = e.file.name;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let typeArr = [];
          this.ruleForm.selected_type_ids.forEach((item) => {
            typeArr.push(item[item.length - 1]);
          });
          let addData = {
            ...this.ruleForm,
            type_ids: typeArr,
            create_type:2
          };
          ExamSave(addData).then((res) => {
            this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功');
            // this.back();
          });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    handleAvatarSuccess(file, type) {
      if (type == 1) {
        this.ruleForm.courseImg = URL.createObjectURL(file.raw);
      }
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
    back() {
      this.$router.back();
    },
    getTrainTypeTree() {
      TrainTypeTree().then((res) => {
        this.options2 = res.data.list;
      });
    },
  },
};
</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 106px;
  display: flex;
  align-items: center;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  line-height: 106px;
  text-align: center;
}
.avatar {
  width: 100%;
  display: block;
}
.prompt {
  font-size: 12px;
  color: #8c939d;
  margin-bottom: 5px;
}
.input_number {
  width: 100%;
  text-align: center;
}
.demo-ruleForm /deep/ .el-input-number__decrease,
.demo-ruleForm /deep/ .el-input-number__increase {
  display: block !important;
}

.footer {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 210px;
  border-top: 1px solid #e6e6e6;
}
</style>
